<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="mobileOptimized" content="240" />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
.rotate ,flag{
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-color: initial;
	border-image: initial;
	width: 100px;
	height: 100px;
	-webkit-border-radius: 100px;
	position: relative;
}
.flag{
	width: 10px;
	height: 10px;
	-webkit-border-radius: 10px;
	background-color: red;
	position: absolute;
	left: 30px;
	right: 30px;
}
</style>
<title>Insert title here</title>
</head>
<body>

<div class="rotate" id="hander">
	<div class="flag" id="hander_in"></div>
</div>

<script type="text/javascript">
	function $(s){
		return document.getElementById(s);
	}
	function log()
	var hander = $("hander");
	hander.addEventListener("mousemove",function(){
		
		debugToPanel("s");
	});
	
</script>

</body>
</html>